#weather {
	margin-bottom: 20px;
}

#weather tr td {
	height: 50px;
}
#weather2 {
	margin-bottom: 20px;
}

#weather2 tr td {
	height: 50px;
}

img.Wmates {
	height: 25px;
}

#weather_suggest tr td {
	line-height: 20px;
}

#weather_div_loading {
	text-align: center;
}

#weather_div  .Socialization_menu img {
	width: 50%;
}

#weather_div .Socialization_menu {
	text-align: center;
}

#weather_div .Socialization_menu tr td {
	width: 25%;
	padding: 6px 0px;
}

#weather_div .Socialization_menu tr td h4 {
	color: #000;
	font-size: 13px;
}

#weather_div .Socialization_menu tr td:hover {
	background-color: #eee;
}

#tax_main_div table tr td input {
	width: 90px;
	padding: 2px 5px;
}

#tax_main_div table tr td {
	line-height: 30px;
	vertical-align: middle;
}

#tax_main_div table tr td:nth-child(odd) {
	text-align: right;
}

#tax_main_div table tr td:nth-child(even) {
	text-align: left;
}
table.tax tr td {
	line-height: 30px;
	vertical-align: middle;
}
table.tax tr td:nth-child(odd) {
	text-align: right;
}
table.tax tr td:nth-child(even) {
	text-align: left;
}
table.tax tr td:nth-child(even) input {
	width: 90px;
	padding: 2px 5px;
}

#main-content {
	margin: 0px !important;
}

.HpLogo {
	height: 50px;
	margin-left: 5px !important;
}

#navlist li {
	display: inline;
	list-style-type: none;
	padding-right: 30px;
	white-space: nowrap;
}

.mainTitle {
	font-size: 15px;
}

a:hover,a:link {
	text-decoration: none;
}

.loading {
	display: none;
	opacity: 0.7;
	filter: alpha(opacity = 70);
	position: absolute;
	left: 0;
	top: 0;
	width: 1000px;
	height: 100%;
	background-color: #FFFFFF;
	z-index: 1000;
}

.matesUserImage {
	border-radius: 35px;
	height: 70px;
	width: 70px;
	margin:5px 0px;
}

.matesUserImage2 {
	border-radius: 75px;
	height: 150px;
	width: 150px;
	border: 3px #fff solid;
	margin-top: -30px;
	margin-bottom: 15px;
}
.myButtons {
	background: none !important;
	border: 0px !important;
	background-color: #007DBA !important;
	color: #fff !important;
	font-size: 13px !important;
	border-radius: 0px !important;
	padding: 6px 6px 6px 6px !important;
	border-bottom-left-radius: 6px !important;
	border-top-right-radius: 6px !important;
}

.myButtons:hover {
	background-color: #D7410B !important;
}

.myDisabledButtons {
	background: none !important;
	border: 0px !important;
	background-color: gray !important;
	color: #fff !important;
	font-size: 13px !important;
	border-radius: 0px !important;
	padding: 6px 6px 6px 6px !important;
	border-bottom-left-radius: 6px !important;
	border-top-right-radius: 6px !important;
}

.parentDisable {
	overflow: hidden;
	width: 100%; //
	height: 550px;
	clear: both;
}

/* upload button */
::-webkit-file-upload-button {
	background: none;
	border: 0px;
	background-color: #007DBA;
	color: #fff !important;
	font-size: 14px;
	border-radius: 0px;
	padding: 8px 8px 8px 8px;
	border-bottom-left-radius: 6px;
	border-top-right-radius: 6px;
}

.linkBtn {
	background: none !important;
	border: 0px !important;
	background-color: #007DBA !important;
	color: #fff !important;
	font-size: 14px !important;
	border-radius: 0px !important;
	padding: 8px 8px 8px 8px !important;
	border-bottom-left-radius: 6px !important;
	border-top-right-radius: 6px !important;
}

.clear {
	clear: both
}

#positionToggle {
	position: absolute;
	top: 9px;
	left: 9px;
}

#showHideList {
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 5px;
	border: 1px solid #cccccc;
	background-color: #eeeeee;
}

#ListInner {
	padding: 10px 10px 10px 10px;
}

.clearfix {
	*zoom: 1;
}

.clearfix:before,.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}

.clearfix:after {
	clear: both;
}

/*label,select,.ui-select-menu { float: left; margin-right: 10px; }
	.wrap ul.ui-selectmenu-menu-popup li a { font-weight: bold; }*/
.ui-selectmenu {
	height: 1.5em;
}

.ui-selectmenu-status {
	line-height: 1.0em;
}

#UserInfo {
	background: url(../MetroStyleFiles/image/bg_NULL.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#UserInfo table {
	color: #ffffff;
	font-size: 20px;
}

#userInfoDiv {
	color: #ffffff;
	text-align: center;
	width: 100%;
}

#userInfoDiv #info_username>span {
	border-bottom: 1px #fff solid;
	font-size: 22px;
	font-weight: bold;
	padding: 10px 0px;
}
#userInfoDiv #info_selfIntro {
	text-align: left;
	width: 90%;
	margin: 0 auto;
}

#userInfoDiv #info_role {
	width: 90%;
	margin: 0 auto;
}

#userInfoDiv #info_role span {
	font-weight: bold;
	padding: 10px 0px;
}
#userInfoDiv #info_all{
	margin-left:auto;
	margin-right:auto;
}
#userInfoDiv #info_all img {
	height: 20px;
}
#userInfoDiv #info_all tr td {
	text-align:left;
	font-size:15px;
}

#registerform {
	background: url(../MetroStyleFiles/image/bg_NULL.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#registerform table {
	text-align:center;
	magain: auto;
	color: #ffffff;
	font-size: 15px;
	border-collapse:collapse;
}

#registerform table tr td{
	height:35px;
	line-height:5px;
}

#registerform Div {
	color: #ffffff;
	text-align: center;
	width: 100%;
}

#tableForm {
	margin: auto;
}

.imgclass {
	magain:20px;
	height: 20px;
	cursor: pointer;
}

input::-webkit-input-placeholder {
	color: #999;
	-webkit-transition: color.5s;
}

input:focus::-webkit-input-placeholder,input:hover::-webkit-input-placeholder
	{
	color: #c2c2c2;
	-webkit-transition: color.5s;
}
.Work_Mates_div2 {
	margin: 0px;
	padding: 0px;
}

#Work_Mates_div {
	margin-top: -12px;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 {
	border-bottom: #ccc 1px solid;
	padding: 10px 0px;
}

.Work_Mates_div2 .total_num {
	float: right;
	margin-bottom: -6px;
	vertical-align: bottom;
}

.Work_Mates_div2 .total_num img {
	height: 16px;
	margin-right: 5px;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 .Work_Mates_img_div2 {
	float: left;
	margin-right: 10px;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 .Work_Mates_text_div {
	color: #333;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 .Work_Mates_text_div span.selfIntro
	{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 .Work_Mates_text_div h2 {
	font-size: 16px;
	margin-bottom:0px;
}

.Work_Mates_div2  .Work_Mates_div_list_div2 .Work_Mates_text_div h2 .role
	{
	font-size: 10px;
	color: #666;
	padding-left: 5px;
	font-weight: normal;
}

.clear {
	clear: both;
}
.circliful {
	position: relative;
}
.circle-text{
	position: absolute;
	z-index:1000;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
	width: 100%;
	text-align: center;
	display: inline-block;
}
.circle-info, .circle-info-half {
	color: #999;
	margin-top:-20px;
}
.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}
canvas{
	position: relative;
	margin-top:-20px;
	z-index:1;
}
#info_interact img{
	cursor:pointer;
	width:30px;
}
#info_interact img.like{
	float:left;
	margin:35px 0px 0px 28px;
}
#info_interact img.like:hover{
	width:35px;
	margin-top:33px;
	margin-left:25px;
}
#info_interact img.zan{
	float:right;
	margin:8px 39px 0px 0px;
	width:25px;
}
#info_interact img.zan:hover{
	width:28px;
	margin-top:6px;
	margin-right:38px;
}

@media (max-width: 321px) {
	#sendR{
	    height: 350px;
    overflow: scroll;}
	}
#sendR
{
	    width: 92%;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 999;
    height:100%;
}

/* .naviArrow.is-selected::after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: .9em solid transparent;
    border-right: .9em solid transparent;
    border-top: .9em solid #00b287;
    position: relative;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);	
	
} */
.naviPanel
{
position: relative;
    height: 60px;
    width: 102.9%;
    top: -25px;
    left: -5px;
	
}
.isSelected{

	border-top:10px solid #00b287!important;
}
.navi
{
	float:left;
	width:33.3%;
	border-top:10px solid #B4B8BB;
	height:30px;
}
.naviText
{
	position:absolute;
	top:22px;
	width:33.3%;
	text-align:center;
	font-size:12px;
}
/* slide */
.slide-main{ height: 190px; position: relative; }
.prev,.next{ display: block; width: 30px; height: 30px; position: absolute; z-index: 222; top: 100px; overflow: hidden; cursor: pointer; opacity: 1; -moz-opacity: 0.6; filter: alpha(opacity=60); _border: 1px solid none; }
.prev{ left:20px; }
.next{ right: 20px; }
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{ opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
.item{ display: block; width: 100%; height: 5px; position: absolute; z-index: 124; top: 540px; left: 0; text-align: center; }
.item a{ display: inline-block; width: 24px; height: 5px; margin-right: 11px; background: #444; opacity: 0.3; -moz-opacity: 0.3; filter: alpha(opacity=30); overflow: hidden; }
.item a.cur{ background: #fff; }
.slide-box,.slide{ display: block; width: 100%; height: 190px; overflow: hidden; }
.slide-box{ position: relative; }
.slide{ display: none; height: 190px; position: relative; position: absolute; z-index: 8; }
.slide a{ display: block; width: 100%; height: 190px; cursor: pointer; }
.obj-a,.obj-b,.obj-c,.obj-d,.obj-f{ position: absolute; z-index: 9; width:100%;height:190px }
.obj-a,.obj-b{ text-align: center; }
.obj-a{ display: block; top: 0px; }
.obj-b{ top: 0px; }
.obj-c{ display: block; top: 0;}
.obj-d{ top: 228px;  }
.obj-d p{ display: block;  font-size: 16px; color: #fff; clear: both; }
.obj-e{ top: 0px; z-index: 12; }
.obj-f{  top: 158px; margin-left: -180px; }
.banAnimate .obj-a{ display: block; animation-name: baoAni; -webkit-animation: baoAni 0.4s linear 0s normal none; -moz-animation: baoAni 0.4s linear 0s normal none; animation: baoAni 0.4s linear 0s normal none; }
@-webkit-keyframes baoAni { from { opacity: 0; left: 60%; } to { opacity: 1; left: 50%; } }
@-moz-keyframes baoAni { from { opacity: 0; left: 60%; } to { opacity: 1; left: 50%; } }
@keyframes baoAni { from { opacity: 0; left: 60%; } to { opacity: 1; left: 50%; } }
.banAnimate .obj-b{ display: block; animation-name: saAni; -webkit-animation: saAni 0.4s linear 0s normal none; -moz-animation: saAni 0.4s linear 0s normal none; animation: saAni 0.4s linear 0s normal none; }
@-webkit-keyframes saAni { from { opacity: 0; -webkit-transform:scale(0,0); } to { opacity: 1; -webkit-transform:scale(1,1); } }
@-moz-keyframes saAni { from { opacity: 0; -moz-transform:scale(0,0); } to { opacity: 1; -moz-transform:scale(1,1); } }
@keyframes saAni { from { opacity: 0; transform:scale(0,0); } to { opacity: 1; transform:scale(1,1); } }
.watch-code.code-show{ display: block; animation-name: scode; -webkit-animation: scode 0.3s linear 0s normal none; -moz-animation: scode 0.3s linear 0s normal none; animation: scode 0.3s linear 0s normal none; }
@-webkit-keyframes scode { from { opacity: 0; -webkit-transform:scale(1,0); transform-origin: left bottom; } to { opacity: 1; -webkit-transform:scale(1,1);  transform-origin:  left bottom; } }
@-moz-keyframes scode { from { opacity: 0; -moz-transform:scale(1,0);  transform-origin: left bottom; } to { opacity: 1; -moz-transform:scale(1,1); transform-origin: bottom bottom; } }
@keyframes scode { from { opacity: 0; transform:scale(1,0); transform-origin: left bottom; } to { opacity: 1; transform:scale(1,1); transform-origin:  left bottom; } }
.banAnimate .obj-c,.banAnimate .obj-e{ display: block; animation-name: saAnic; -webkit-animation: saAnic 0.3s linear 0s normal none; -moz-animation: saAnic 0.3s linear 0s normal none; animation: saAnic 0.3s linear 0s normal none; }
@-webkit-keyframes saAnic { from { opacity: 0; left: 47%; } to { opacity: 1; left: 50%; } }
@-moz-keyframes saAnic { from { opacity: 0; left: 47%; } to { opacity: 1; left: 50%; } }
@keyframes saAnic { from { opacity: 0; left: 47%; } to { opacity: 1; left: 50%; } }
.banAnimate .obj-d,.banAnimate .obj-f{ display: block; animation-name: saAnid; -webkit-animation: saAnid 0.3s linear 0s normal none; -moz-animation: saAnid 0.3s linear 0s normal none; animation: saAnid 0.3s linear 0s normal none; }
@-webkit-keyframes saAnid { from { opacity: 0; left: 53%; } to { opacity: 1; left: 50%; } }
@-moz-keyframes saAnid { from { opacity: 0; left: 53%; } to { opacity: 1; left: 50%; } }
@keyframes saAnid { from { opacity: 0; left: 53%; } to { opacity: 1; left: 50%; } }